<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar :title="titleTap" :isBackIndex="isBackIndex"></fa-navbar>
		<!-- 内容 -->
		<view class="" v-if="isRender">
			<view class="card card-header-first">
				<view class="card-header-second">
					<view class="" style="min-height: 215upx;">
						<view style="padding: 28upx 32upx 0 32upx;">
							<view class="" style="display: flex;">
								<view class="name-size" v-if="cardInfo.nickname">{{cardInfo.nickname}}</view>
								<view class="zhiwei" v-if="cardInfo.duty">
									<text>{{cardInfo.duty}}</text>
								</view>
							</view>
						</view>
						<image v-if="cardInfo.avatar" class="card-img" :src="cardInfo.avatar" mode=""></image>
						<view class="card-row hangye" v-if="cardInfo.industry.length>0">
							<text v-for="(item,index) in cardInfo.industry" :key="index">{{item}}</text>
						</view>
						<view class="" style="clear: both;">
						</view>
						<view class="card-row" v-if="cardInfo.wechat" @click="copy('wechat')">
							<view class="">
								微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信 :
							</view>
							<view>
								<text>{{cardInfo.wechat}}</text>
								<text class="copy">复制</text>
							</view>
						</view>
						<view class="card-row" v-if="cardInfo.email" @click="copy('email')">
							<view class="">
								邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱 :
							</view>
							<view class="">
								<text>{{cardInfo.email}}</text>
								<text class="copy">复制</text>
							</view>
						</view>
						

						<view class="card-row" v-if="cardInfo.company">
							<view class="">
								单位名称 :
							</view>
							<view>
								<view class="">
									{{cardInfo.company}}
								</view>
							</view>
							<!-- <image src="../../static/card_back.jpg" mode=""></image> -->
						</view>
						<view class="card-row" v-if="cardInfo.address">
							<view class="">
								联系地址 :
							</view>
							<view class="">
								{{cardInfo.address}}
							</view>
						</view>
					</view>
					
					<view class="card-phone" v-if="cardInfo.mobile">
						<view class="card-phone-left">电话：{{cardInfo.mobile}}</view>
						<view class="card-phone-right" @click="tel(cardInfo.mobile)">
							<view>拨打电话</view>
						</view>
					</view>
				</view>
			</view>
			
<!-- 			<view class="" style="margin: 32upx;">
				<image style="width: 180upx;height: 180upx;" v-if="cardInfo.avatar" :src="cardInfo.avatar"></image>
				<view class="" style="float: left;">
					<view v-if="cardInfo.nickname">{{cardInfo.nickname}}</view>
					<view v-if="cardInfo.company">{{cardInfo.company}}</view>
				</view>
			</view> -->
			
			<view class="" style="clear: both;">
				
			</view>
			<view class="jiejian" style="margin: 32upx 32upx 0 32upx;display: flex;justify-content: space-between;">
				<view class="" style="border-left: 10upx solid #1A7EFA;height: 50upx;">
					<text style="padding-left: 32upx ;font-size: 38upx;">简介</text>
				</view>
				<!-- <view @click="goIndex()" class="" style="float: right;width: 80upx;height: 80upx;text-align: center;background-color: #324A7C;border-radius: 50%;">
					<image style="width: 28upx;height: 28upx;margin-top: 4upx;" :src="shouye" mode=""></image>
					<view class="" style="font-size: 18upx;color: #fff;margin-top: -4upx;">
						返回首页
					</view>
				</view> -->
				<view @click="goIndex()" class="" style="z-index: 1000;position: fixed;right: 32upx;margin-top: -16upx;width: 90rpx;height: 90rpx;text-align: center;background-color: #324A7C;border-radius: 50%;">
					<image style="width: 28upx;height: 28upx;margin-top: 8upx;" :src="shouye" mode=""></image>
					<view class="" style="font-size: 18upx;color: #fff;margin-top: -4upx;">
						返回首页
					</view>
				</view>
			</view>
			
			<view class="u-p-30 u-bg-white u-line-height" style="margin-bottom: 80rpx;">
				<u-parse :html="cardInfo.profile" :tag-style="vuex_parse_card_style"
					:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''" @linkpress="navigate"></u-parse>
			</view>
			<view :class="is_iphone?'is_iphone':''"></view>

		</view>
		<view class="footer safe-area-inset-bottom" v-if="is_edit"  @click="editCard()">
			编辑名片
		</view>
		
	</view>
</template>

<script>
	export default {
		onShow(e) {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				this.$u.vuex('vuex_user', {});
			}
			
			// let is_share = options.is_share || 0;
			// if (is_share) {
			// 	this.is_share = 1;
			// 	this.in_time = parseInt(new Date().getTime() / 1000) + '';
			// 	console.log(this.in_time)
			// }
		},
		onLoad(e) {
			console.log('用户信息',this.vuex_user)
			console.log('onload：',e)
			let query = e || {};
			console.log('进入页面携带的参数：',query)
			if(query.id){
				this.id = query.id
				if(this.id == this.vuex_user.id){
					this.is_edit = true
				}
			}else{
				this.id = this.vuex_user.id
				this.is_edit = true
			}
			this.getCardInfo();
			
			if(query.is_share){
				this.is_share = 1;
				this.in_time = parseInt(new Date().getTime() / 1000);
			}
			
			let systemInfo = uni.getSystemInfoSync();
			console.log('系统信息',systemInfo)
			if (systemInfo.model.search('iPhone') != -1 ) {
				this.is_iphone = true;
			}
		},
		data() {
			return {
        isBackIndex:3,
				id: 0,
				titleTap: '',
				cardInfo: {},
				isRender: false,
				content: '',
				scrollTop: 0,
				shouye: '',
				is_share: 0,
				in_time: '',
				out_time: '',
				is_edit: false,
				is_iphone: false,
			};
		},
		methods: {
			getCardInfo: async function(){
				let res = await this.$api.getCardInfo({
					user_id: this.id,
				});
				if (!res.code) {
					return;
				}
				this.isRender = true;
				this.titleTap = res.data.nickname + '的名片';
				
				this.$u.mpShare = {
					title: res.data.nickname + '的名片',
					path: 'pages/index/card?id=' + res.data.id + '&is_share=1'
				};
				
				this.cardInfo = res.data || {};
				console.log('名片信息，接口获取的：',this.cardInfo)
			},
			copy(type){
				let copy_text = ''
				let success_text = ''
				if(type == 'wechat'){
					copy_text = this.cardInfo.wechat
					success_text = '微信号'
				}
				if(type == 'email'){
					copy_text = this.cardInfo.email
					success_text = '邮箱'
				}
				console.log(copy_text)
				console.log(success_text)
				
				uni.setClipboardData({
					data: copy_text,//要被复制的内容
					success:()=>{//复制成功的回调函数
					  uni.showToast({//提示
						title: success_text + '复制成功'
					  })
					}
				});
				
			},
			tel(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			goIndex(){
				this.$u.route('/pages/index/index');
			},
			editCard(){
				this.$u.route('/pages/my/profile');
			},
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data.userInfo || {});
			},
			// 添加日志
			addLog: async function() {
				let res = await this.$api.cardViewLog({
					card_user_id: this.cardInfo.id,
					in_time: this.in_time,
					out_time: parseInt(new Date().getTime() / 1000),
				});
				console.log('添加日志返回的内容',res)

			},
			
		},
		//下拉刷新
		onPullDownRefresh() {		
			this.getCardInfo();
		},
		
		/**
		* 生命周期函数--监听页面隐藏
		*/
		onHide: function () {
		    const self = this
		    self.addLog()
		},

	};
</script>

<style lang="scss">
	page {
		background-color: white;
		
		.card{
			// font-family: 'Courier New', Courier, monospace;
			font-size: 30upx;
			color: #fff;
		}
		.card-img{
			width: 140upx;
			height: 140upx;
			float: right;
			border-radius: 25upx;
			margin-right: 32upx;
			margin-top: -50upx;
		}
		.name-size{
			font-size: 40upx;
		}
		.card-header-first{
			margin: 16upx 32upx 0 32upx;
		}
		.zhiwei{
			margin: auto 0;
			margin-left: 12upx;
			float: left;
		}
		.zhiwei text{
			font-size: 20upx;
			background-color: #FFD271;
			color: black;
			padding: 4upx 15upx;
			border-radius: 10upx;
			
		}
		.hangye{
			margin: 15upx 0 4upx 0;
		}
		.hangye text{
			font-size: 20upx;
			border: 1upx solid white;
			padding: 8upx 15upx;
			border-radius: 10upx;
			margin-right: 24upx;
		}
		.card-row{
			padding: 16upx 32upx 0 32upx;
			display: flex;
			view{
				min-width: 140upx;
				font-size: 28upx;
			}
		}
		.copy{
			margin-left: 32upx;
			font-size: 20upx;
			border: 2upx solid #fff;
			padding: 5upx 10upx;
			border-radius: 10upx;
		}
		.danwei{
			padding: 20upx 32upx 0 32upx;
			display: flex;
			view{
				min-width: 148upx;
				font-size: 28upx;
			}
		}
		.card-header-second{
			border-radius: 25upx 25upx 0 0;
		    background: linear-gradient(120deg, #556E9C 48%, #324A7C 48%);
		}
		.card-phone{
			margin-top: 32upx;
			height: 120upx;
			background: linear-gradient(-90deg, #394F7F,#8FA7C9);
			display: flex;
			justify-content: space-between;
			// border-radius: 0 0 25upx 25upx;
			view{
				font-size: 28upx;
			}
		}
		.card-phone-left{
			margin:auto 32upx;
			float: left;
		}
		.card-phone-right{
			margin:auto 32upx;
			float: right;
			width: 150upx;
			background: linear-gradient(-90deg, #AABEDC,#E9EFF9);
			color: black;
			border-radius: 50upx;
			color: #051C4B;
			
		}
		.card-phone-right view{
			padding: 12upx;
			text-align: center;
		}
		
		.is_iphone {
			height: 80upx;
		}
		
		.footer {
			width: 100%;
			height: 80upx;
			background-color: #D9001B;
			border-radius: 80upx;
			text-align: center;
			line-height: 80upx;
			font-size: 36upx;
			position: fixed;
			bottom: 0;
			margin-bottom: 50upx;
			color: #fff;
		}
		
		.detail_title{
			color: #323232;
			// font-weight: bold;
		}
		.mien_info {
			display: flex;
			color: #afafaf;
			margin: 20rpx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			.mien_time {
				margin: 0 20rpx 0 10rpx;
			}
			.mien_place{
				// width: 250rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.mien_main {
			text-indent: 2em;
			font-size: 30rpx;
			line-height: 200%;
		}
		.mien_date{
			white-space: nowrap;
		}
	}

	.detail-tag {
		color: #aaa;
	}

	.comment {
		background-color: #ffffff;
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.replay {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.opeate {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.name {
					max-width: 100rpx;
				}
			}

			.content {
				margin-bottom: 10rpx;
				word-break: break-word;
			}
		}
	}

	.comment:not(:last-child) {
		border-bottom: 1px solid #eee;
	}

	.product-images {
		width: 50%;
		margin-bottom: 30rpx;
	}

	.product-images:nth-child(2n) {
		padding-left: 15rpx;
	}

	.product-images:nth-child(2n + 1) {
		padding-right: 15rpx;
	}

	.u-alert-desc {
		word-break: break-word;
	}
	.like{
		height: 80rpx;
	}
</style>
